<template>
  <transition name="slide-fade">
    <div class="back-top" v-show="show" @click.stop="getTop">
      <i class="iconfont icon-huojian"></i>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'

const show = ref(false)

function scroll() {
  const scrollTop
    = window.pageYOffset
    || document.documentElement.scrollTop
    || document.body.scrollTop
  if (scrollTop > 150) {
    show.value = true
  }
  else {
    show.value = false
  }
}

function getTop() {
  const timer = setInterval(() => {
    const scrollTop
      = window.pageYOffset
      || document.documentElement.scrollTop
      || document.body.scrollTop
    const speed = Math.ceil(scrollTop / 5)
    document.documentElement.scrollTop = scrollTop - speed
    if (scrollTop === 0) {
      clearInterval(timer)
    }
  }, 20)
}

onMounted(() => window.addEventListener('scroll', scroll))
onBeforeUnmount(() => window.removeEventListener('scroll', scroll))
</script>

<style scoped lang="less">
.back-top {
  background-color: #ffffff;
  position: fixed;
  right: 3rem;
  bottom: 8rem;
  border-radius: 25px;
  cursor: pointer;
  opacity: 0.8;
  text-align: center;
  z-index: 99;

  &:hover {
    -webkit-animation: jello-vertical 0.9s both;
    animation: jello-vertical 0.9s both;
  }
  i {
    font-size: 40px;
    color: #1e59e4;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2021-12-17 16:24:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-vertical
 * ----------------------------------------
 */
@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@media (max-width: 600px) {
  .back-top {
    display: none;
  }
}
</style>
